import React, { forwardRef, useState, useEffect } from "react";
import { Form, Input, Select } from "antd";
import { EyeTwoTone, EyeInvisibleOutlined } from "@ant-design/icons";

const { Option } = Select;

const UserForm = forwardRef((props, ref) => {
  const [isDisable, setIsDisable] = useState(false);

  // 父组件传的值改变时 自动执行
  useEffect(() => {
    setIsDisable(props.updateDisable);
  }, [props.updateDisable]);

  const roleChange = (value) => {
    if (value === 1) {
      setIsDisable(true);
      ref.current.setFieldsValue({ region: "" });
    } else {
      setIsDisable(false);
    }
  };

  const roleObj = {
    1: "superAdmin",
    2: "admin",
    3: "editor",
  };
  const { roleId, region } = JSON.parse(localStorage.getItem("user"));

  // 根据权限禁用
  const checkRegionDisabled = (item) => {
    if (props.isUpdate) {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return item.value !== region;
      }
    }
  };
  const checkRoleDisabled = (item) => {
    if (props.isUpdate) {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superAdmin") {
        return false;
      } else {
        return roleObj[item.id] !== "editor";
      }
    }
  };

  return (
    <Form ref={ref} layout="vertical">
      <Form.Item
        name="username"
        label="用户名"
        rules={[{ required: true, message: "不能为空" }]}
      >
        <Input placeholder="请输入用户名"></Input>
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: "不能为空" }]}
      >
        <Input.Password
          autoComplete="off"
          placeholder="请输入密码"
          iconRender={(visible) =>
            visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
          }
        ></Input.Password>
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={[{ required: !isDisable, message: "不能为空" }]}
      >
        <Select placeholder="请选择" disabled={isDisable}>
          {props.regionList.map((item) => (
            <Option
              key={item.id}
              value={item.value}
              disabled={checkRegionDisabled(item)}
            >
              {item.title}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[{ required: true, message: "不能为空" }]}
      >
        <Select placeholder="请选择" onChange={(value) => roleChange(value)}>
          {props.roleList.map((item) => (
            <Option
              key={item.id}
              value={item.id}
              disabled={checkRoleDisabled(item)}
            >
              {item.roleName}
            </Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
});

export default UserForm;
